<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/common/common.jsp" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品属性添加页面</title>
   <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/layer/skin/default/layer.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css"/>
        <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
<!--     <link href="../../My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css"/> -->
    <style type="text/css">
        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
    </style>
<body>
		<div class="content text-center"  style="margin-top: 48px;">
    <form class="form-horizontal"   id="operateForm">
     <div class="form-group"  id="selectAll">
            <label  class="col-sm-2 control-label"><span style="color: red">*</span>商品分类:</label>
         <div class="col-sm-3">
                <select  id="first"  class="validate[required]" onchange="getClass(this.options[this.selectedIndex].value,'second');" name="status"  style="width: 100%;line-height: 33px;height: 33px;" >
                    <option value="">请选择分类</option>
                    <c:forEach items="${list}" var="c">
                    	  <option value="${c.id}">${c.classifyName}</option>
                    </c:forEach>
                </select>
             </div>
             <div class="col-sm-3">
                <select  id="second"  onchange="getClass(this.options[this.selectedIndex].value,'three');"   name="status" style="width: 100%;line-height: 33px;height: 33px;" >
                    <option value="">请选择分类</option>
                </select>
             </div>
             <div class="col-sm-3">
                <select  id="three"     name="status" style="width: 100%;line-height: 33px;height: 33px;" >
                    <option value="">请选择分类</option>
                </select>
             </div>
        </div>
        <div class="form-group">
            <label for="description" class="col-sm-2  control-label"><span style="color: red">*</span>属性名称:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control validate[required]"   maxlength="100"  id="propertyName" name="propertyName" data-fun="dataFunDemo"
                       placeholder="请输入属性名称" />
            </div>
        </div>
        <div class="form-group">
            <label for="description" class="col-sm-2  control-label"><span style="color: red">*</span>属性排序:</label>
            <div class="col-sm-8">
                <input type="text"  class="form-control validate[custom[integer], min[1]]"   maxlength="100"  id="sotr" name="sort" data-fun="dataFunDemo"
                       placeholder="" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <button type="button" id="operateButton" onclick="save();" class="btn btn-primary">新增</button>
                  <button type="button" id="operateButton" onclick="history.go(-1);" class="btn btn-primary">返回</button>
<!--                   <a herf="javascript:;" onclick="save();" >sdf</a> -->
            </div>
        </div>
<!--         <input type="hidden" name="id" value="1" /> -->
       	<input type="hidden"    id="levleHidden"  value=""/> 
       	<input type="hidden"    id="classifyId"  name="classifyId" value=""/> 
    </form>
</div>
		
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/page.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script>
    $(function () {
    	 $("#operateForm").validationEngine({ 
    			promptPosition: "topRight", 
    			validationEventTriggers:"keyup blur", 
    			success :  false,
    			failure : function() { callFailFunction()  }
    		});
    });
	//保存方法
	function save(){
		//表单验证
	 	var flag = $("#operateForm").validationEngine("validate");
    	if(!flag){
     		return false;
    	} 
		if($("#first").val()!=""&&$("#second").val()==""&&$("#three").val()==""){
			$("#classifyId").val($("#first").val());
		}
		if($("#first").val()!=""&&$("#second").val()!=""&&$("#three").val()==""){
			$("#classifyId").val($("#second").val());
		}
		if($("#first").val()!=""&&$("#second").val()!=""&&$("#three").val()!=""){
			$("#classifyId").val($("#three").val());
		}
		 var poststr=$('#operateForm').serialize();
			$.ajax({url:'${ctx}/api/product/property/add',data:poststr,dataType:"json",type:"post",success:savecallback,error:function(data){
						layer.alert("与服务器连接中断");
	     }});
	}
	//成功回调方法
   function savecallback(data){
			if(data.code=="200"){
				resteForm();
				layer.msg('保存成功', {
					  icon: 1,
					  time: 2000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
						window.location.href="${ctx}/api/product/property/listPage";
					}); 
				
				
			}else{
			if(data.code=="70004" )
			{  
				layer.msg(data.message, {icon: 2}); 
			}
			if(data.code=="70009" )
			{  
				layer.msg(data.message, {icon: 2}); 
			}
			}
		}
	
	function getClass(id,level){
		$("#levleHidden").val("");
		$("#levleHidden").val(level);
		if(id!=""){
		$.ajax({url:'${ctx}/api/productClassify/selectClass?id='+id,dataType:"json",type:"post",success:savecallbackOne,error:function(data){
					layer.alert("与服务器连接中断");
     }});
		}
	}
	 function savecallbackOne(data){
				console.log(data.data); 
				var levle=$("#levleHidden").val();
				if(levle=="second"){
					$("#three").find("option").remove();
					$("#three").prepend("<option value=''>请选择分类</option>");
				}
				$("#"+levle).find("option").remove();
				$("#"+levle).prepend("<option value=''>请选择分类</option>");
				for(var i=0; i<data.data.length;i++){
                    $("#"+levle).append("<option value='"+data.data[i].id+"'>"+data.data[i].classifyName+"</option>");
                }
				
		}
	 	//清空表单方法
	 	function  resteForm(){
	 		$("#operateForm").find("input").val("");
	 		$("#operateForm").find("select").val("");
	 	}
	 	
// 	 	function back(){
// 			window.location.href="${ctx}/static/api/product/property/listPage";
// 	 	}
</script>			
</body>
</html>